<template>
  <div>
    <div class="goal-count clearfix">
      <div
        v-for="(item, index) in Label"
        @click="handelClick(item, index)"
        :class="['count-txt', { selected: checkIndex == index }]">
        <p class="count">{{ info[item.key] != null ? info[item.key] : '-' }}</p>
        <p class="label">{{ item.value }}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        Label: [
          {
            key: 'whole',
            value: '全部'
          },
          {
            key: 'complete',
            value: '目标达成'
          },
          {
            key: 'notComplete',
            value: '目标未达成'
          }
        ],
        checkIndex: 0,
        info: {
          whole: '-',
          complete: '-',
          notComplete: '-'
        }
      }
    },
    methods: {
      init(data) {
        this.info = data
      },
      resetIndex() {
        this.checkIndex = 0
      },
      handelClick(data, index) {
        this.checkIndex = index
        this.$emit('change', data.key)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .goal-count {
    padding: 10px;
    .count-txt {
      float: left;
      cursor: pointer;
      font-size: 12px;
      color: #222;
      min-width: 100px;
      text-align: center;
      height: 100%;
      border-radius: 4px;
      padding: 6px 10px 0;
      line-height: 26px;
      .count {
        font-size: 20px;
        font-weight: 700;
      }
    }
    .count-txt:hover {
      background: #eee;
    }
    .selected {
      color: #fff;
      background: #2d8cf0;
    }
  }
</style>
